<template>
  <!--期刊加盟管理-->
  <div class="wrapper">
    <!--添加-->
    <div style="padding-bottom: 10px">
      <Button v-show="table" type="success" size="small" @click="show1">添加</Button>
      <Button v-show="table2" type="success" size="small" @click="back">返回</Button>
    </div>
    <!--表格-->
    <div v-show="table">
      <Table border stripe :columns="columns" :data="data"></Table>
      <!--Vue组件-->
      <div class="page">
        <paging :all="all" @returnValue="returnValue"></paging>
      </div>
    </div>
    <!--公用-->
    <div v-show="show">
      <div class="add_style">
        <span>标题:</span>
        <Input v-model="formItem.title" placeholder="" style="width: 620px"></Input>
      </div>
      <div class="add_style">
        <span>类型:</span>
        <Select v-model="formItem.deployModule" style="width:620px">
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="add_style">
        <span>在线状态:</span>
        <Select v-model="formItem.state" style="width:620px">
          <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="add_style">
        <span>简介:</span>
        <Input v-model="formItem.newsIntro" type="textarea" :rows="10" style="width: 620px"/>
      </div>
      <div class="add_style" style="padding-top: 20px">
        <span>内容:</span>
        <div>
          <VueUeditorWrap v-model="msg" :config="myConfig"></VueUeditorWrap>
        </div>
      </div>
      <!--添加-->
      <div v-show="addBtn" class="add_style">
        <Button size="small" type="primary" @click="handleSubmit('formItem')">保存</Button>
        <Button size="small" type="primary" @click="issue('formItem')">发布</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
      <!--编辑-->
      <div v-show="compileBtn" class="add_style">
        <Button size="small" type="primary" @click="handleSubmit1('formItem')">保存</Button>
        <Button size="small" type="primary" @click="issue1('formItem')">发布</Button>
        <Button size="small" type="primary" @click="back">取消</Button>
      </div>
    </div>

    <Modal v-model="modal2" width="360">
      <div style="text-align:center">
        <p>删除不可恢复，是否确定删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long @click="notarizeRemove">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import paging from '../module/paging.vue';

  export default {
    components: {VueUeditorWrap, paging},
    data() {
      return {
        /*查询url*/
        inquireurl: this.$api.url,
        /*添加按钮*/
        table: true,
        addBtn: false,
        /*返回按钮*/
        table2: false,
        /*表格*/
        columns: [
          {
            title: '标题',
            key: 'title',
          },
          {
            title: '日期',
            key: 'createTimeFormate',
            align: 'center',
            width: 120,
          },
          {
            title: '创建人',
            key: 'name',
            align: 'center',
            width: 120,
          },
          {
            title: '是否在线',
            key: 'isDeploy',
            align: 'center',
            width: 120,
            filters: [
              {
                label: '上架',
                value: '上架'
              },
              {
                label: '下架',
                value: '下架'
              },
            ],
            filterMethod(value, row) {
              return row.isDeploy.indexOf(value) > -1;
            },
          },
          {
            title: '在线状态',
            key: 'state',
            align: 'center',
            width: 120,
            filters: [
              {
                value: '置顶',
                label: '置顶'
              },
              {
                value: '推荐',
                label: '推荐'
              },
              {
                value: '热门',
                label: '热门'
              },
            ],
            filterMethod(value, row) {
              return row.state.indexOf(value) > -1;
            }
          },
          {
            title: '操作',
            key: '操作',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show2(params.index);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除'),
              ]);
            }
          },
        ],
        data: [],
        /*分页*/
        cur: 1,
        all: 0,
        /*公用*/
        show: false,
        /*表单*/
        formItem: {
          title: '',
          deployModule: '',
          newsIntro: '',
          img: '',
          newsContent: {},
          createUser: '',
          state: '',
        },
        cityList: [
          {
            value: 'articleMess',
            label: '文章资讯'
          },
          {
            value: 'activity',
            label: '编辑活动'
          },
          {
            value: 'worktrend',
            label: '工作动态'
          },
          {
            value: 'dynamic',
            label: '行业动态'
          },
          {
            value: 'inform',
            label: '公告通知'
          },
          {
            value: 'league',
            label: '期刊加盟'
          },
        ],
        cityList1: [
          {
            value: '一般',
            label: '一般'
          },
          {
            value: '置顶',
            label: '置顶'
          },
          {
            value: '推荐',
            label: '推荐'
          },
          {
            value: '热门',
            label: '热门'
          },
        ],
        /*确定删除*/
        modal2: false,
        /*编辑按钮*/
        compileBtn: false,
        /*富文本编辑器*/
        myConfig:{
          UEDITOR_HOME_URL: './static/ue/',
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 350,
          // 初始容器宽度
          initialFrameWidth: 1000,
          // 关闭自动保存
          enableAutoSave: false
        },
        msg: ''
      }
    },
    mounted() {
      window.scrollTo(0,0);
      this.get(this.inquireurl + '/news/selectAll/league/' + this.cur)
    },
    methods: {
      /*添加*/
      show1() {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.addBtn = true;
      },
      back() {
        this.$router.go(0)
      },
      /*分页*/
      returnValue(data) {
        this.get(this.inquireurl + '/news/selectAll/league/' + data)
      },
      /*添加-保存*/
      handleSubmit() {
        this.formItem.newsContent = this.msg;
        this.post(this.$api.url + '/news/addWorkTrend')
      },
      /*添加-发布*/
      issue() {
        this.formItem.newsContent = this.msg;
        this.post(this.$api.url + '/news/addPutAway')
      },
      /*编辑*/
      show2(index) {
        this.table = false;
        this.table2 = true;
        this.show = true;
        this.compileBtn = true;
        this.$axios.get(this.$api.url + "/news/new/" + this.data[index].id).then((res) => {
          this.formItem.title = res.data.data.title;
          this.formItem.state = res.data.data.state;
          this.formItem.id = res.data.data.id;
          this.formItem.deployModule = res.data.data.deployModule;
          this.formItem.newsIntro = res.data.data.newsIntro;
          this.msg = res.data.data.newsDetail.newsContent
        });
      },
      /*编辑-保存*/
      handleSubmit1() {
        this.formItem.newsContent = this.msg;
        this.post(this.$api.url + '/news/updateWorkTrend')
      },
      /*编辑-发布*/
      issue1() {
        this.formItem.newsContent = this.msg;
        this.post(this.$api.url + '/news/updateNews')
      },
      /*删除*/
      remove(index) {
        this.modal2 = true;
        this.index = this.data[index]
      },
      notarizeRemove() {
        this.$axios.get(this.$api.url + "/news/delWorkTrend/" + this.index.id).then((res) => {
          this.$Message.success(`删除成功!`);
          this.modal2 = false;
          this.get(this.inquireurl + '/news/selectAll/league/' + this.cur)
        });
      },

      /*post请求*/
      post(url) {
        let _this = this;
        let formData = new FormData();
        formData.append("news", JSON.stringify(this.formItem));
        let config = {
          headers: {'Content-Type': 'multipart/form-data'}
        };
        this.$axios.post(url, formData, config).then(function (res) {
          if (res.data.data == true) {
            _this.$router.go(0)
          }
        })
      },
      /*get请求*/
      get(url) {
        this.$axios.get(url).then((res) => {
          this.data = res.data.data.lists;
          this.all = res.data.data.totalPage;
        });
      },

    },
  }
</script>

<style scoped>
  .wrapper {
    margin: 10px;
  }

  .add_style {
    padding-bottom: 10px;
  }

  .add_style > span {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 70px;
  }
</style>
